import styles from '../../index.less';
import React, { useState, useEffect, memo } from 'react';
// import kls from 'classnames';
import { Tabs } from 'antd';
// import { CloseOutlined, PhoneOutlined, EnvironmentOutlined } from '@ant-design/icons';
// import layerUtils from '@/utils/arcgis/layer/index';
// import { jsapi, viewUtils } from '@/utils/arcgis';
import {
  cementConcreteProduceData,
  transportVehicleTrackData,
  weighBridgeData,
} from '@/services/bimServices';
import { connect, useSelector } from 'umi';

import Cement from './cement';
import Transporter from './transporter';
import Weighbridge from './weighbridge';

const { TabPane } = Tabs;

const LINK_ARR = [
  'http://wccg.tech:82/#/deviceSystem/cementconcreteproduce',
  'http://wccg.tech:82/#/deviceSystem/transportvehicletrack',
  'http://wccg.tech:82/#/deviceSystem/weighBridge',
];

function AnotherDeviceList() {
  const curProjId = useSelector(store => store.app.curProjId);
  const [curTab, setCurTab] = useState('1');
  const [cementData, setCementData] = useState(null);
  const [vehicleData, setVehicleData] = useState(null);
  const [weighData, setWeighData] = useState(null);
  useEffect(() => {
    init(curProjId);
  }, [curProjId]);

  async function init() {
    const _cementData = await cementConcreteProduceData(curProjId);
    const _vehicleData = await transportVehicleTrackData(curProjId);
    const _weighBridgeData = await weighBridgeData(curProjId);
    console.log(_cementData, _vehicleData, _weighBridgeData);
    setWeighData(_weighBridgeData);
    setVehicleData(_vehicleData);
    setCementData(_cementData);
  }
  return (
    <>
      <div className={styles.anotherDeviceList}>
        <Tabs activeKey={curTab} onChange={setCurTab}>
          <TabPane tab="拌合楼监控" key="1">
            <Cement cementData={cementData} />
          </TabPane>
          <TabPane tab="运输车轨迹" key="2">
            <Transporter vehicleData={vehicleData} />
          </TabPane>
          <TabPane tab="地磅数据" key="3">
            <Weighbridge data={weighData} />
          </TabPane>
        </Tabs>
        <a
          className={styles.link}
          href={`${LINK_ARR[curTab]}?projectId=${curProjId}`}
          target="_blank"
          rel="noreferrer"
        >
          {' '}
          查看更多
        </a>
      </div>
    </>
  );
}

export default AnotherDeviceList;
